url = '/:slug|[a-z0-9\-]+-p-\d+.html$'
description = '产品内容页模板'
layout = 'default'
==
function onStart() {
$slugArr = explode('-', str_replace('.html', '', $this->param('slug')));
$id = array_pop($slugArr);
$condition = ['id'=>$id];
$product = App::make('Jason\Ccshop\Controllers\Products')->getProduct($condition);
if ($product) {
$this['product'] = $product;
} else {
return redirect('/404');
}
}
==
{% set reviews = catalog.getReviews(product.id) %}
{% set reviewsSum = reviews.total %}
{% put page_title %}{{ product.page_title ?: product.name }} - {% default %}{% endput %}
{% put meta_keywords %}{{ product.meta_keywords }}{% endput %}
{% put meta_description %}{{ product.meta_description }}{% endput %}
{% put pageurl %}{{ product.url }}{% endput %}

{% put metaArea %}
<meta property="og:title" content="{{ product.page_title ?: product.name }} - {% default %}">
<meta content="{{ product.price }}" property="og:price:amount">
<meta property="og:price:currency" content="USD">
<meta property="og:availability" content="in stock">
<meta content="{{ reviews.rating_stat.avg }}" property="og:rating">
<meta content="5" property="og:rating_scale">
<meta property="og:type" content="product">
<meta property="og:url" content="{{ product.url }}">
<meta property="og:image" content="{{ catalog.app.domain }}{{ product.thumb.0.getPath }}">
<meta property="og:site_name" content="{{ catalog.app.name }}">
<meta property="og:description" content="{{ product.meta_description }}">
{% endput %}
<div id="contents">

    {% partial 'header-campaign-message' %}
    {% partial 'breadcrumbs' product=product categories=product.categories %}
    <form action="#" method="post" id="product_addtocart_form">
        <section>
            <section class="product_mainpht women_bgcolor">
                <div class="slide slideCarousel">
                    <div class="viewport sildertype flex switch_img_area_wrap">
                        <ul class="swipe clearfix _lazyLoadImageAbsolute_wrap">
                            {% for key, img in product.feature_image %}
                            <li class="item clearfix">
                                <a class="switch_img_area" href="javascript:;">
                                    <img class="_swipeItemImg" src="{{ img.path }}"></a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    <nav>
                        <div class="arrows">
                            <a class="prev off" href="javascript:;">
                                <span class="product_mainpht_iconArrow"></span>
                            </a>
                            <a class="next" href="javascript:;">
                                <span class="product_mainpht_iconArrow"></span>
                            </a>
                        </div>
                        <ul class="indicator clearfix" id="indicator">
                            {% for key, img in product.feature_image %}
                            {% if key
                            <= 4 %}
                            <li class="list-item {% if key==0 %} selected {% endif %}">
                                <a class="indicatorCarousel" data-indicator-num="0" href="javascript:;">●</a>
                            </li>
                            {% endif %}
                          {% endfor %}
                        </ul>
                    </nav>
                </div>
            </section>
            <section class="grid_margin">
                <div class="product_data_top pb0">
                    <p id="_product_brand">
                        <span class="new_txt cubettl force_color">{{ 'NEW'|_ }}</span>
                        <span class="fnt_xsmall lh15">{{ product.name }}</span>
                    </p>
                </div>
            </section>
            <section class="mh10 list_product_box">
                <div class="productPricePointArea">
                    <div class="productPricePointArea_price">
                        <span class="totalPrice force_color">
                            <span>{{ product.price|formatPrice }}</span>
                        </span>
                        <span class="old-price">{{ product.list_price|formatPrice }}</span>
                    </div>
                    <a href="#comment">
                        <div class="productPricePointArea_point">
                            <span class="reviewStar size2 star{{ product.rating | round }}"></span>
                              {%if reviews.total > 0%}
                            <span class="txtPoint">({{ reviews.total }} {{ 'Reviews'|_ }})</span>
                            {%endif%}
                        </div>
                    </a>
                </div>
                {{ 'Status'|_ }}：
                <p class="availability {% if product.status == 'instock' %}in-stock{% else %}out-of-stock{% endif %}"><span>{{ ('jason.ccshop::lang.product.status.' ~ product.status)|trans }}</span></p>
               
            </section>            
        </section>
        <section class="mb15">
          {% if product.status == 'instock' %}
            <div class="grid_margin" id="skuSelect">
                {%for group in product.groups %}
                <div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
                    <div class="colorImg">
                        <h2 class="options-title"> <span class="force_color">*</span>
                            {{ group.feature.name }}
                        </h2>
                        <div class="proRadioWrap">
                            {% if count(group.items) > 0%}
                            {% for item in group.items %}
                                <label {% if item.id == product.id %} class="labelSelect"{% endif %}>
                                    <input type="radio" id="radioture{{group.id}}" onclick="fun('radioture{{group.id}}')"  style="display:none;"  name="productGroup{{ group.id }}" class="on-selected-change-url" {% if item.id == product.id %}checked{% endif %}
                                    value="{{ item.url }}">
                                    <span>
                                      <img style="width:40px;" src="{{ item.feature_image.0.path }}">
                                    </span>
                                </label>
                            {% endfor %}

                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endfor %}


                {% partial "catagory/option-element" product=product %}
                {% if product.status == 'instock'%}
                    <div class="quantity">
                        <span>{{ 'QTY'|_ }}</span>
                        <div class="proRadioWrap">
                            <a id="minus" onclick="minus();">-</a>
                            <input type="text" value="1" id="number" name="qty" onblur="modify();">
                            <a id="plus" onclick="plus();">+</a>
                        </div>
                    </div>
                    <div class="clearfix">
                        <div class="reservation_n pull-left" id="packageStatus" style="width:50%;">
                            <div data-request-data="product:'{{ product.id }}', redirect: '{{ 'checkout/checkout'|page }}'">
                                <a class="_submit button_common button_submit reservation_n_btn btn_addCart mt15" href="javascript:;"
                                   data-request="onAddToCart" data-request-update="'mini-cart': '#minicart'"
                                   data-request-redirect="{{ 'checkout/cart'|page }}" data-request-loading="#loading"
                                    role="button">
                                    <span class="i_common_product button_icon icon-add_cart"></span>
                                    <span class="button_txt">{{ 'Add to cart'|_ }}</span>
                                </a>
                                <span id="addp_cart_success" class="add_cart_success" style="display: none;">{{ 'Add to cart already'|_ }}</span>
                            </div>
                        </div>                
                        <div class="mh10 pull-right" style="width:40%; padding-top:20px;">
                            <div class="box_list">
                                <a class="addLikeFavBrand btnGhost tac box_list_main" href="javascript:;"
                                    data-request="onAddToWishlist"
                                    data-request-data="key: {{ product.id }}"
                                    data-request-update="'catagory/addlikefavbrand': '#addlikefavbrand_aim'"
                                     role="button" >
                                    <div class="addLikeFavBrand_inner">
                                        <div class="i_common_product icon-add_brand_fav addLikeFavBrand_btnIcon"></div>
                                        <div class="addLikeFavBrand_btnTxt"></div>
                                    </div>
                                </a>
                                <span class="addLikeFavBrand_count" id="addlikefavbrand_aim" >
                                    {% if product.customField('wish_total') > 0 %}
                                        {{ product.customField('wish_total') }}
                                    {% else %}
                                        0
                                    {% endif %}
                                </span>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
          {% endif %}
        </section>
    </form>
    <style>
        .fnt_xsmall img{
            width:100%;
        }
    </style>
    <section class="pr" id="productDetail">
        <h3 class="title_main">{{ 'Details'|_ }}</h3>
        <div class="m10 fnt_xsmall">{{ product.content|raw }}</div>
        <ul class="thumbnail">
            {% for key, img in product.thumb %}
            <li>
                <img src="{{ img.path }}"></li>
            {% endfor %}
        </ul>
    </section>
    <a name="comment"></a>
    <section>
        <h3 class="title_main">{{ 'reviews'|_ }}</h3>
        <div class="reviewArea">
            <div class="reviewArea_header clearfix">
                <div class="fl">
                    {{ 'Comprehensive evaluation'|_ }}
                    <span class="avg">
                        <span class="reviewStar size2 star{{ reviews.rating_stat.avg | round }} mr10" style="top:0;"></span>
                    </span>
                </div>
                <div class="fr cnt">
                    <span class="fwb">({{ reviews.total }})</span>
                    {{ 'reviews'|_ }}
                </div>
            </div>
            <div class="_tabArea">
                <ul class="reviewFlatTab">
                    <li class="reviewFlatTab_item _tab _selected">
                        <a href="#reviewComment" class="reviewFlatTab_itemInner">{{ 'reviews'|_ }}</a>
                    </li>
                    <li class="reviewFlatTab_item _tab">
                        <a href="#reviewSize" class="reviewFlatTab_itemInner">{{ 'Add Review'|_ }}</a>
                    </li>
                </ul>
                <div class="_contents _selected pt10" id="reviewComment">

                    <ul class="list_product_review">
                        {% for key, review in reviews %}
                        <li class="item _usefulReview_closure _setToggleSwich">
                            <div class="list_product_review_header _clickableArea">
                                <span class="reviewStar size0 star{{ review.rating | round }}"></span>
                                <span class="fwb">{{ review.title }}！</span>
                            </div>
                            <p class="list_product_review_comment _clickableArea _toggleHide double_line">
                                {{ review.content }}.
                                <br>{{ review.name }}</p>
                            <p class="list_product_review_comment dn _clickableArea _toggleHide">
                                {{ review.content }}.
                                <br>

                                <br>>

                                <!-- <br>write time: {{ review.created_at}} -->
                            </p>
                            {% if review.images %}
                            <p>
                                {% for  key, image in review.images %}
                                {% if key < 3 %}
                            <div class="reviewPics">
                                <img src="{{ image.getPath(200,200,{'mode':'crop'}) }}" alt="{{ review.title }}">
                            </div>
                            {% endif %}
                            {% endfor %}
                            write by: {{ review.name }}
                            </p>
                            {% endif %}
                        </li>
                        {% endfor %}
                    </ul>
                    {{ reviews.appends({per: get('per')}).fragment('reviews').render()|raw }}
                </div>
                {{ form_ajax('onPushReview') }}
                <input type="hidden" name="product" value="{{ product.id }}">
                <input type="hidden" class="input-text required-entry" value="4" id="rating_rank" name="rating">

                <div class="_contents reviewDataTabContents" id="reviewSize">
                    <div class="reviewContentsTitle">
                        <span id="score">
                            <a name="1" class="reviewStar size4"></a>
                            <a name="2" class="reviewStar size4"></a>
                            <a name="3" class="reviewStar size4"></a>
                            <a name="4" class="reviewStar size4"></a>
                            <a name="5" class="reviewStar size4"></a>
                        </span>
                    </div>
                    <div class="submitReview">
                        <label class="ipass">{{ 'Name'|_ }}<span class="force_color">*</span></label>
                        <input type="text" class="commonInput" id="nickname_field" name="name">
                        <label class="ipass">{{ 'summary'|_ }}<span class="force_color">*</span></label>
                        <input type="text" class="commonInput" id="summary_field" name="title">
                        <label class="ipass">{{ 'reviews'|_ }}<span class="force_color">*</span></label>
                        <textarea class="required-entry" rows="3" cols="5" id="review_field" name="content"></textarea>
                        <button class="button_decide mt10" title="Submit Review" type="submit">
                            <span class="button_txt">{{ 'submit'|_ }}</span>
                        </button>

                    </div>
                </div>
                {{ form_close() }}
            </div>
        </div>
    </section>
    <section>
        <div class="_tabArea">
            <ul class="flatTab_nav flatTab_nav2 clearfix m10">
                <li class="_tab _selected flatTab_navList">
                    <a class="_brandTab_tab flatTab_navList_link" href="javascript:;">
                        <div class="flatTab_navList_inner">{{ 'RECOMMENDED'|_ }} </div>
                    </a>
                </li>
                <li class="_tab flatTab_navList">
                    <a class="_brandTab_tab flatTab_navList_link" href="javascript:;">
                        <div class="flatTab_navList_inner">{{ 'BEST SELLING'|_ }}</div>
                    </a>
                </li>
            </ul>
            {% set category = product.categories|last %}
            <div class="flatTab_contents">
                <div class="_contents _selected">
                    <ul class="list_product_box clearfix">
                        {% partial 'catagory/product-recomed' smodel='recommend' code=category.id %}
                    </ul>
                </div>
                <div class="_contents">
                    <ul class="list_product_box clearfix">
                        {% partial 'catagory/product-best' smodel='best-selling' code=category.id %}
                    </ul>
                </div>

            </div>
        </div>
    </section>
</div>
<link href="{{ 'assets/css/shop.css'|theme }}" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{{ 'assets/js/shop_product.js'|theme }}"></script>
<script type="text/javascript" src="{{ 'assets/js/flipsnap.min.js'|theme }}"></script>
<script type="text/javascript">


    $("#productDetail .fnt_xsmall").find("img").each(function(i,item){
        if($(item).prop("size")){
            $(item).removeAttr("size");
        };
        if($(item).prop("style")){
            $(item).removeAttr("style");
        };
        $(item).attr("width","100%");
    })


    var GradList = document.getElementById("score").getElementsByTagName("a");
    for(var i=0;i < GradList.length;i++){
        GradList[i].onmouseover = function(){
            for(var Qi=0;Qi<GradList.length;Qi++){
                GradList[Qi].className = 'reviewStar size4';
            }
            for(var Qii=0;Qii<this.name;Qii++){
                GradList[Qii].className = 'reviewStar size4 star1';
            }
            $("#rating_rank").val(Qii);  //write the ratingrank in the hidden input
        }
    }
</script>


<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '1973822869538409');
fbq('track', 'PageView');
fbq('track', 'ViewContent');
</script>
<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1973822869538409&ev=PageView&noscript=1"
/></noscript>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->